<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>我的智障消息列表</title>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="copyright" content="Copyright (c) 2006-2018 Mafengwo."/>
    <meta name="format-detection" content="telephone=no,address=no"/>
    <meta name="referrer" content="always"/>
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/strategy.css" />
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">

    <link href="https://css.mafengwo.net/css/cv/mobile+css+head:mobile+css+ui^YVw^1526627473.css" rel="stylesheet" type="text/css"/>
    <link href="https://css.mafengwo.net/mobile/css/wo/wo.css?1526627473" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        .level{
            color: #ff9d00;
        }
    </style>
    <script>
        $(function () {
            //获取装载数据的input框
            var currentInput = $("#currentPage");
            //用于存储游记的数组容器
            var travelArr = [];
            //总页数
            var pages = 1;
            //当前页为第一页
            currentInput.val(1);

            //获取游记数据的方法
            function query() {
                //获取当前页的值
                var currentPage = currentInput.val();//1
                $.get('/privateMessages', {currentPage: currentPage}, function (data) {
                    //合并两个数组到第一个参数数组上
                    console.log(data);
                    $.merge(travelArr, data.list);
                    //用于渲染时循环,循环时是取list的属性出来
                    var json = {
                        list: travelArr
                    };
                    //渲染数据
                    ///--------------------getHref:getHref,
                    $("#pills-1").renderValues(json,{getHref1:function (item, value){
                            var href = $(item).data("href");
                            $(item).attr('href', href + value+'&id='+$(item).closest('div').find("span").first().html());

                        },getState:function (item, value) {
                            if(value){
                                $(item).html('~未回复')
                            }else {
                                $(item).html('~已回复')
                            }
                        }
                    });
                    //设置总页数
                    pages = data.pages;
                });
                //当前页input框+1
                currentInput.val(parseInt(currentPage) + 1);
            }

            //默认查询第一页的数据
            query();

            //当页面滚动条变化时，执行的函数
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {

                    var currentPage = currentInput.val();
                    //判断是否小于或等于最后一页,如果是就去查询
                    if (currentPage <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了!',
                            autoClose: 500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
            $(".uid").click(function () {
                console.log($(this).attr("value"));
            })
        })
    </script>

</head>
<body>
<input type="hidden" name="currentPage" id="currentPage" value="1">
<div id="pos38"></div>
<header class="MfwHead ">
    <div class="LBtn">
        <a class="btn back" href="/mine/message.html;" id="_j_top_history_back"></a>
    </div>

    <div class="CBtn"><h1>消息列表</h1></div>
</header>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item" id="selectFollow">
        <a class="nav-link active show" id="fShow" data-toggle="pill" href="#pills-1">
            <span style="font-weight: bold;">猜猜哪头猪发信息给你</span>
        </a>
    </li>

</ul>
<div class="tab-content" id="pills-tabContent">

    <div class="tab-pane fade active show" id="pills-1">
        <ul id="followShow" render-loop="list">
                <li>
                        <hr>
                        <div style="margin-top:10px;margin-left:5%">
                            <span name="id"  render-html="list.id" style="display: none"></span>
                           用户 <span render-html="list.friend.nickName"  style="color: #6f42c1"></span> 给您发了条信息
                            <span render-key="list.state" render-fun="getState"></span><br>
                            内容为：<span name="content" render-html="list.content"></span><br>
                            <!--<a data-href="/mine/chatInfo.html?state=true&friendId=" render-key="list.friend.id" style="color: #6f42c1" render-fun="getHref">点击回复</a>-->

                            <a data-href="/mine/chatInfo.html?state=true&friendId=" render-key="list.friend.id" style="color: #6f42c1" render-fun="getHref1">点击回复</a>
                        </div>
                </li>
        </ul>
    </div>
</div>
</body>
</html>
